﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div id="appRoutes" style="margin:2px;padding:2px;">
    <el-form inline label-position="right" label-width="70px" class="query-form">
        <el-form-item label="关键字" size="mini">
            <el-input placeholder="请输入关键字" style="width:150px;" v-model="keyword" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="状态" size="mini">
            <el-select v-model="enabled" size="mini">
                <el-option label="全部" value="null"></el-option>
                <el-option label="启用" value="true"></el-option>
                <el-option label="禁用" value="false"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="success" size="mini" @@click="SetRoutes(null)">新增</el-button>
            <el-button type="primary" size="mini" @@click="handleSearch">查询</el-button>

            <el-button v-on:click="Back()" size="mini">返回</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe border style="width:100%" size="mini">
        <el-table-column type="index" width="50" align="center"></el-table-column>
        <el-table-column prop="serviceName" label="服务名称" width="150"></el-table-column>
        <el-table-column prop="serviceNamespace" label="服务命名空间" width="150"></el-table-column>
        <el-table-column prop="upstreamPathTemplate" label="上游路径" width="180"></el-table-column>
        <el-table-column prop="upstreamHttpMethod" label="上游方法类型" width="180"></el-table-column>
        <el-table-column prop="downstreamPathTemplate" label="下游路径" width="180"></el-table-column>
        <el-table-column label="状态" width="100" align="center">
            <template slot-scope="scope">
                <el-button type="success" round size="mini" v-if="scope.row.enabled==true">{{scope.row.enabled === false ? '禁用' : '启用'}}</el-button>
                <el-button type="danger" round size="mini" v-if="scope.row.enabled==false">{{scope.row.enabled === false ? '禁用' : '启用'}}</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先等级" width="100"></el-table-column>
        <el-table-column label="是否匹配大小写" width="120" align="center">
            <template slot-scope="scope">
                {{scope.row.routeIsCaseSensitive === false ? '否' : '是'}}
            </template>
        </el-table-column>
        <el-table-column prop="requestIdKey" label="请求id的Key" width="100"></el-table-column>
        <el-table-column prop="timeout" label="超时时间" width="100"></el-table-column> 
        <el-table-column fixed="right" label="操作" width="250" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @@click="SetRoutes(scope.row )">设置路由</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @@size-change="handleSizeChange"
                   @@current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
</div>
<style>
    .el-checkbox {
        margin-bottom: 10px !important;
    }

    .chktext {
        white-space: normal;
        word-break: break-all;
        width: 150px;
    }
</style>
<script>
    function refreshFromChild() {
        vueRoutes.GetRoutesrList();
    }


    var vueRoutes = new Vue({
        el: '#appRoutes',
        data() {
            return {
                projectId: parseInt(getQueryString("projectId") || 0),
                keyword: '',
                enabled:'null',
                pageSize: 10,
                currentPage: 1,
                total: 0,
                tableData: [],

                selectRoutesId:0,
            }
        },
        created(){
            var _this = this;
            this.GetRoutesrList();

        },
        methods: {
            SetRoutes: function (row) {
                var id = 0;
                if(row!=null) id=row.id;
                this.$addTab(id, "设置路由", "../Routes/Edit?id=" + id);
            },
            RouteEdit(row) {
                var id = 0;
                if (row) id = row.id;
                this.$addTab(id, id == 0 ? "新增项目" : "修改项目", "../Routes/RoutesEdit?id=" + id);
            },
             RoutesDetail(row ) {
                 this.$addTab(row.id, "项目详情", "../Routes/RoutesEdit?id=" + row.id);
            },
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSearch() {
                this.GetRoutesrList();
            },
            handleClick(row) {
                console.log(row);
            },
            GetRoutesrList() {
                  var _this = this;
                 _this.$post("@Url.Action("GetProjectRoutesPageList", "Routes")", {
                     PageIndex: _this.currentPage,
                     PageSize: _this.pageSize,
                     Keyword: _this.keyword,
                     projectId: _this.projectId,
                     enabled: _this.enabled == 'null' ? null : _this.enabled == "true" ? true : false,
                     order: [
                         { FieldName: "Id", Order: "Desc" }
                     ]
                 }).then((response) => {
                        _this.tableData = response.items;
                        _this.total = response.totalCount;
                  }).catch((error) => {
                  });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.GetRoutesrList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.GetRoutesrList();
            },
            Back() {
                this.$back(true);
            }
        }
    });
</script>
